<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
    <style>
      html {
        background-color: white;
        height: 100%;
      }

      body {
        height: inherit;
        background-color: white;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      div {
        display: inline-block;
        font-size: 10rem;
      }
    </style>
  </head>
  <body>
    <!-- <div>↻</div> -->
    <div>
      ↻
    </div>

    <script>
      const spinner = document.querySelector('div');
      let rotateCount = 0;
      let rAF;
      let startTime = null;
      let isStart = false;

      function draw(timestamp) {
        if (!startTime) {
          startTime = timestamp;
        }

        rotateCount = (timestamp - startTime)/3;
        if (rotateCount > 359) {
          rotateCount %= 360;
        }

        spinner.style.transform = `rotate(${rotateCount}deg)`;
        rAF = requestAnimationFrame(draw);
      }

      document.body.addEventListener('click', function() {
        if (!isStart) {
          draw();
          isStart = true;
        } else {
          cancelAnimationFrame(rAF);
          // startTime = null;
          isStart = false;
        }
      });

    </script>
  </body>
</html>
